<template>
	<view class="menu">
		<sdc-title-bar title="热门推荐"></sdc-title-bar>
		<view class="menus u-flex u-flex-wrap u-row-between">
			<view 
				class="item u-rela" 
				v-for="item,index of menus" 
				:key="index"
				@click="toDetail(item)"
			>
				<u-image 
					:src="item.main_image_cdn" 
					mode="scaleToFill" 
					height="250" 
					width="340"
					:lazy-load="true"
				></u-image>
				<view class="texts u-flex u-row-between u-abso u-col-center">
					<text class="title">{{item.title}}</text>
					<view class="view u-flex u-col-center">
						<u-icon name="eye" size="28"></u-icon>
						<text>{{item.view}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menus:[]
			};
		},
		methods: {
			loadMenu(){
				return this.$api.menu.index({type: 'hot'})
				.then(res=>{
					if(res.code == 1)
						this.menus = res.data.data.splice(0,4)
				})
			},
			toDetail(item){
				this.$Router.push({
					name: 'menu.detail',
					params: {
						id: item.id
					}
				})
			}
		},
		mounted() {
			this.loadMenu()
		}
	}
</script>

<style lang="scss" scoped>
	.menu{
		margin-top: $uni-spacing-col-base;
		background-color: $uni-bg-color;
		.menus{
			padding: $uni-spacing-col-base $uni-spacing-row-base;
			.item{
				width: 340upx;
				margin-bottom: $uni-spacing-col-base;
				.texts{
					padding: 0 10upx;
					font-size: $uni-font-size-sm;
					height: 60upx;
					bottom: 0upx;
					left: 0;
					right: 0;
					background-color: rgba($color: #FFFFFF, $alpha: 0.45);
					color: #333333;
					.title{
						white-space: nowrap;
						overflow: hidden;
						width: 230upx;
						text-overflow: ellipsis;
					}
					.view{
						text{
							padding-left: 8upx;
						}
					}
				}
			}
		}
	}
</style>
